<template>
  <div  class="page-layout">
    <h1>Extend配置使用</h1>
    <p>
      dv-chart 系列组件 除了 data 和 settings 配置外， <strong style="color: red">还可以使用extend配置处理一些特殊配置。</strong> extend 的配置与echart的配置一致。
    </p>

    <p style="color: blue">
      dv-chart 系列组件 开启 “debug” 后('&lt;dv-chart debug&gt; &lt;/dv-chart&gt;') 可以打印出 echart的 options。 通过extend配置，可以对 options 配置进行补充拓展
    </p>

    <h2>extend 自定义 间距、平均线、最大最小点  </h2>
     
    <textarea readonly style="width: 800px; height: 380px">
      <dv-chart-bar :data="data1" :settings="{lines: ['登录量']}" :extend="extend1" debug></dv-chart-bar>

      const data1 = ref({
        columns: ['渠道', '访问量', '登录量'],
        rows: [ ['直接访问', 320, 280], ['邮件营销', 302, 230], 
                ['联盟广告', 334, 320], ['视频广告', 390, 250], ['搜索引擎', 330, 290] 
              ]
      }) 

      const extend1 = ref({
        'grid': {top: 80}, // 调整图表的grid位置，参考 echart.options.grid
        'series.0.barCategoryGap': '80%', // 调整 series[0]（柱状配置） 的 间距
        'series.0.markPoint': { // 配置 series[0]（柱状配置） 的 标注点
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          'series.1.markLine': { // 设置 series[0](线状) 的平均线
            data: [{ type: 'average', name: 'Avg', itemStyle: {color: 'red'} }]
          }  
      })  
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid;"  >
      <dv-chart-bar :data="data1" :settings="{lines: ['登录量']}" :extend="extend1" debug></dv-chart-bar>
    </div>
    <br/>

    <p>从上例可以得知，extend 配置 是 dv-chart 图表 在<strong style="color:red"> data 和 settings 配置生成的 图表 options 基础上进行更多的个性配置</strong>。 
    <br/>
    在dv-chart 组件 使用 “debug=true” 可在console中输出 最终echart的 配置options</p>
    
     
  </div>

</template>
<script setup lang="ts" >
import {DvPage, DvBox, DvChartBar} from '$comp/index';
import {ref} from 'vue' 
const data1 = ref({
  columns: ['渠道', '访问量', '登录量'],
  rows: [ ['直接访问', 320, 280], ['邮件营销', 302, 230], 
          ['联盟广告', 334, 320], ['视频广告', 390, 250], ['搜索引擎', 330, 290] 
        ]
}) 
const extend1 = ref({
  'grid': {top: 80}, // 调整图表的grid位置，参考 echart.options.grid
  'series.0.barCategoryGap': '80%', // 调整 series[0]（柱状配置） 的 间距
  'series.0.markPoint': { // 配置 series[0]（柱状配置） 的 标注点
      data: [
        { type: 'max', name: 'Max' },
        { type: 'min', name: 'Min' }
      ]
    },
    'series.1.markLine': { // 设置 series[0](线状) 的平均线
      data: [{ type: 'average', name: 'Avg', itemStyle: {color: 'red'} }]
    } 
})
 


 
// import demoWarp from '@/components/demo-warp.vue';
</script>
<style lang="scss" scoped>
 .page-layout{
  height: 100%;
  
 }
</style>